<template>
  <div class="yhcl w-100 h-100">
    <div
      class="item"
      v-for="item in list"
      :key="item.name"
      :style="{
        background: `url(${item.bg}) no-repeat center center`,
        backgroundSize: '100% auto',
      }"
    >
      <div class="value">{{ item.value }}个</div>

      <div class="name">{{ item.name }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import bg1 from "@/assets/image/yunxingjiankong/yhcl_1.png";
import bg2 from "@/assets/image/yunxingjiankong/yhcl_2.png";
import bg3 from "@/assets/image/yunxingjiankong/yhcl_3.png";
const baseList = [
  { name: "已处置", bg: bg1 },
  { name: "处置中", bg: bg2 },
  { name: "未处置", bg: bg3 },
];

const list: any = ref([]);

const props = defineProps({
  selectValue: {
    default: 0,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
    
  let data = [];
  try {
    data = jsonData.value.yxjk.yhcl[props.selectValue];
  } catch (error) {}

  return data;
});
watch(
  () => current.value,
  (val) => {
    if (val) {
      list.value = val.map((value: any, index: number) => ({
        value,
        ...baseList[index],
      }));
    }
  }
);
</script>

<style lang="less" scoped>
.yhcl {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  .item {
    height: 100%;
    flex: 1;
    margin: 0 28px;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
  }
  .value {
    font-family: DIN, DIN;
    font-weight: 500;
    font-size: 24px;
    margin: 40px 0 170px;
  }
 
}
</style>
